<template>
	<view class="step_content">
		<view class="step_item_state">
			<view class="step_item">
				<image src="../../static/circleBlue.png" mode=""></image>
				<view class="step_textStep">预约服务</view>
			</view>
			<uni-popup ref="popup" type="center" background-color="#fff">
				<uni-list>
					<uni-list-item title="18893029302" />
					<uni-list-item title="呼叫" />
					<uni-list-item title="取消" />
				</uni-list>
			</uni-popup>
			<view class="step_line"></view>
			<view class="step_item" @click="openPay">
				<image src="../../static/circleGreen.png" mode=""></image>
				<view class="step_textStep">支付订单</view>
			</view>
			<view class="step_line"></view>
			<view class="step_item">
				<image src="../../static/circleRed.png" mode=""></image>
				<view class="step_textStep">门店服务</view>
			</view>
		</view>
	</view>
</template>

<script>
	import circleBlue from '../../static/circleBlue.png'
	import circleRed from '../../static/circleRed.png'
	import circleGreen from '../../static/circleGreen.png'
	export default {
		
		data() {
			return {}
		},
		methods: {
			openPay(){
				this.$emit('text',true)
			}
		}
	}
</script>

<style>
	.step_content {
	    display: flex;
	    justify-content: center; /* 水平居中 */
	}
	.step_item_state {
		width:480rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.step_item_state image {
		z-index: 1;
		position: relative;
		width: 95rpx;
		height: 95rpx;
	}
	.step_textStep{
		font-size: 24rpx;
		text-align: center;
		z-index: 2;
		width: 70rpx;
		height: 50rpx;
		line-height: 33rpx;
		position: absolute;
		margin-left: 12rpx;
		margin-top: -90rpx;
		color: #fff;
	}
	.step_line{
		margin-top: 48rpx;
		width: 112rpx;
		height: 2rpx;
		background-color: #F7F7F7;
		border: 2rpx dashed #F7F7F7;
	}
	</style>